<template>
  <div class="collect">
    
    <!-- 顶部导航 -->
    <van-nav-bar
      title="我的收藏"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 收藏列表 -->
    <div class="shoplist">
      <!-- <div @click="toDetail(item)" class="shop" v-for="(item,index) in $store.state.collectlist" :key="index"> -->
      <div @click="toDetail(item)" class="shop" v-for="(item,index) in collectlist" :key="index">
        <div class="imgbox">
          <img :src="item.picUrl" alt="">
        </div>
        <div class="text">
          <div class="name">{{item.name}}</div>
          <div class="sale"> ☆ {{item.wmPoiScore}} {{item.monthSalesTip}}</div>
          <div class="desc">{{item.minPriceTip}} {{item.shippingFeeTip}}</div>
        </div>
      </div>
      <!-- <div v-if="$store.state.collectlist.length == 0" class="empty"> -->
      <div v-if="collectlist.length == 0" class="empty">
        未收藏任何店铺,<span @click="$router.push('/index/home')">去逛逛</span>
      </div>
    </div>
  </div>
</template>

<script>
//导入vuex中的工具函数(辅助函数) , 使用该工具函数 简化vuex在组件中的应用
import { mapState } from 'vuex'

export default {
    computed:{
        //mapState()这个工具函数 会将vuex中的数据 映射到组件的computed中.
        ...mapState(['collectlist'])
    },
    methods:{
        toDetail(item){ //跳转到详情页
            this.$router.push('/detail/'+item.mtWmPoiId);
        }
    }
}
</script>

<style lang='scss' scoped>
.shoplist{
  margin: 10px;
  .shop{
    display: flex;
    margin: 10px 0;
    .imgbox{
      width: 80px;
      margin-right: 10px;
      img{
        width: 100%;
      }
    }
    .text{
      font-size: 12px;
    }
  }

  .empty{
    text-align: center;
    padding: 50px 0;
    span{
        color: red;
    }
  }
}
</style>